<template>
	<view class="body">
		<view class="tabel"> 消息 </view>
		<view class="notice">
			<view>
				<image src="../../static/message-icon/dianzan2.png" mode="widthFix"></image>
			</view>
			<view class="text">
				<text @click="dianzan">点赞通知</text>
				<text>用户“Nana7mi”赞了您</text>
			</view>
		</view>
		<view class="notice">
			<view>
				<image src="../../static/message-icon/huifu.png" mode="widthFix"></image>
			</view>
			<view class="text">
				<text @click="pinglun">评论通知</text>
				<text>用户“Nana7mi”赞了您</text>
			</view>
		</view>
		<view class="notice">
			<view>
				<image src="../../static/message-icon/tongzhi.png" mode="widthFix"></image>
			</view>
			<view @click="system" class="text">
				<text>系统通知</text>
				<text>用户“Nana7mi”赞了您</text>
			</view>
		</view>


	</view>
</template>


<script>
	export default {
		data() {
			return { };
		},

		methods: { }
	}
</script>

<style lang="scss" scoped>
	.body {
		background-color: #FFFFFF;
		width: 100%;
		min-height: 100vh;

		.tabel {
			width: 100%;
			height: 160upx;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			font-size: 36upx;
			padding-bottom: 10upx;
			border-bottom: #E8EBED solid 2upx;
		}

		.notice {
			display: flex;
			align-items: center;
			margin-left: 38upx;
			margin-right: 38upx;
			padding-top: 46upx;

			image {
				width: 88upx;
				height: 88upx;
			}

			.text {
				display: flex;
				flex-direction: column;
				// align-items: center;
				justify-content: center;
				align-content: space-between;
				width: 100%;
				height: 100upx;
				border-bottom: #E8EBED solid 2upx;
				margin-left: 12upx;

				text:nth-child(2) {
					color: gray;
					font-size: 28upx;
					margin-top: 6upx;
				}
			}
		}

	}
</style>
